<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-svg-icon">
      <switch-normal v-model="commonAttr.isSvga" label="加载Svga动画" @change="onChangeAttr"></switch-normal>
      <input-normal v-if="commonAttr.isSvga" label="Svga地址" placeholder="url" v-model="commonAttr.svgaUrl" @change="onChangeAttr"></input-normal>
      <template v-else>
        <el-divider content-position="center">图标数据</el-divider>
        <dropdown-normal v-model="commonAttr.url" :valLists="SVG_D_LIST" label="选择图标" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <input-normal label="svg地址" placeholder="" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
        <dropdown-normal v-model="commonAttr.type" :valLists="SVG_ANIMATE_PLAY_TYPE" label="播放方式" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-model="commonAttr.start" :valLists="SVG_ANIMATE_START_TYPE" label="触发类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-model="commonAttr.pathTimingFunction" :valLists="SVG_ANIMATE_EASE_TYPE" label="路径缓动类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-model="commonAttr.animTimingFunction" :valLists="SVG_ANIMATE_EASE_TYPE" label="动画缓动类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <input-normal label="持续时间" v-model="commonAttr.duration" @change="onChangeAttr"></input-normal>
        <input-normal label="延迟秒数" placeholder="1" v-model="commonAttr.delay" @change="onChangeAttr"></input-normal>
        <input-normal label="每个路径间隔距离" placeholder="20" v-model="commonAttr.dashGap" @change="onChangeAttr"></input-normal>
        <input-normal label="线条宽度" v-model="commonAttr.strokeWidth" @change="onChangeAttr"></input-normal>
        <switch-normal v-model="commonAttr.isDrag" label="拖动播放" @change="onChangeAttr"></switch-normal>
        <switch-normal v-model="commonAttr.reverseStack" label="反向动画" @change="onChangeAttr"></switch-normal>
        <color-normal v-model="commonAttr.color" label="颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      </template>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { SVG_D_LIST, SVG_ANIMATE_PLAY_TYPE, SVG_ANIMATE_EASE_TYPE, SVG_ANIMATE_START_TYPE } from '@/const/'
const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>